<template>
  <div class="screen-layout">
    <div class="screen-layout__header">
      <screen-header />
    </div>
    <div class="screen-layout__body">
      <div class="screen-layout__left">
        <div>
          <card-title title="专家类型"></card-title>
          <expert-chart></expert-chart>
        </div>
        <div>
          <card-title title="专家产业领域"></card-title>
          <expert-area-chart />
        </div>
      </div>

      <div class="screen-layout__center">
        <top-number></top-number>

        <div class="bottom">
          <div class="field-block">
            <card-title title="专家产业领域" class="fix-top"></card-title>
            <industry-ranking-chart></industry-ranking-chart>
          </div>
          <div class="rank-block">
            <card-title title="专家关注产业排行" class="fix-top"></card-title>

            <div class="p20">
              <board-table
                :columns="rankingColumns"
                :data="data"
                scrollHeight="2.1rem"
              >
                <template #rank="{ $index }">
                  <index-render :index="$index + 1"></index-render
                ></template>
              </board-table>
            </div>
          </div>
        </div>
      </div>
      <div class="screen-layout__right">
        <div>
          <card-title title="专家派出单位Top排行"></card-title>
          <div class="p20">
            <board-table :columns="columns" :data="data" scrollHeight="33vh">
              <template #rank="{ $index }">
                <index-render :index="$index + 1"></index-render
              ></template>
            </board-table>
          </div>
        </div>
        <div>
          <card-title title="专家年龄分布" class="fix-top"></card-title>
          <expert-age-chart />
        </div>
      </div>
    </div>
    <div class="map">
      <map-chart @click-dot="clickMapDot"></map-chart>
    </div>
    <map-detail ref="dRef"></map-detail>
  </div>
</template>
<script>
import ScreenHeader from "./header";
import { CardTitle, BoardTable, IndexRender } from "./components";

import ExpertChart from "./charts/expert-chart.vue";
import ExpertAreaChart from "./charts/expert-area-chart.vue";
import ExpertAgeChart from "./charts/expert-age-chart.vue";
import IndustryRankingChart from "./charts/industry-ranking-chart.vue";
import TopNumber from "./top-number.vue";
import MapChart from "./charts/map.vue";

import MapDetail from "./tooltip/map-detail.vue";

export default {
  components: {
    MapChart,
    CardTitle,
    IndexRender,
    BoardTable,
    ScreenHeader,
    TopNumber,
    ExpertChart,
    ExpertAgeChart,
    ExpertAreaChart,

    MapDetail,
    IndustryRankingChart,
  },
  data() {
    return {
      columns: [
        {
          title: "排名",
          key: "rank",
          width: 100,
        },
        {
          title: "机构名称",
          key: "name",
          width: 200,
        },
        {
          title: "人数",
          key: "num",
          width: 100,
        },
      ],
      data: Array(20)
        .fill(0)
        .map(() => ({
          name: "云南农科院",
          num: 20,
        })),
      rankingColumns: [
        {
          title: "排名",
          key: "rank",
          width: 100,
        },
        {
          title: "产业",
          key: "name",
          width: 200,
        },
        {
          title: "人数",
          key: "num",
          width: 100,
        },
      ],
    };
  },
  methods: {
    clickMapDot() {
      this.$refs.dRef.show();
    },
  },
};
</script>
<style lang="scss">
.p20 {
  padding: 0 0.2rem;
}

.fix-top {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.screen-layout {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-size: 100% 100%;
  background-image: url("@/assets/screen/bg.png");

  --screen-header-height: 1.05rem;
  --screen-lr-width: 4.4rem;

  &__header {
    position: relative;
    height: var(--screen-header-height);
    width: 100%;
    box-sizing: border-box;
  }

  &__body {
    position: relative;
    width: 100%;
    height: calc(100% - var(--screen-header-height));
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.2rem;
    padding-top: 0.05rem;
    box-sizing: border-box;
  }
  .map {
    position: absolute;

    left: 50%;
    top: 10%;
    // right: 10%;
    transform: translate(-50%);
    height: 86%;
    // height: 80%;
    width: calc(100% - var(--screen-lr-width) * 2 + 0.4rem);
    z-index: 2;

    // background-size: 100% 100%;
    background-image: url("@/assets/screen/cb.png");
    background-position-y: 50%;
  }

  &__center {
    position: relative;

    width: calc(100% - 4.33rem * 2 - 0.3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .bottom {
      display: flex;
      justify-content: space-between;
      z-index: 10;
    }

    .field-block {
      width: 48%;
      height: 3.55rem;
      background-size: 100% 100%;
      background-image: url("~@/assets/screen/c6.png");
    }
    .rank-block {
      width: 48%;
      height: 3.55rem;
      background-size: 100% 100%;
      background-image: url("~@/assets/screen/c4.png");
    }
  }

  &__left,
  &__right {
    width: 4.33rem;
    height: 100%;
    box-sizing: border-box;
    background-size: 100% 100%;
    background-image: url("@/assets/screen/c1.png");
    padding: 0.15rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 20;
  }

  .bg-image {
    background-size: 100% 100%;
    background-image: url("~@/assets/screen/top.png");
  }
}
</style>
